//
//  CustomTabBarView.swift
//  iFishApp
//
//  Created by Bob on 2022/3/3.
//

import SwiftUI
import SDWebImageSwiftUI

enum CustomTabBar: String, CaseIterable {
    case home = "闲鱼"
    case niceplay = "会玩"
    case message = "消息"
    case mine = "我的"
    
    var iconName: String {
        switch self {
        case .home:
            return "tabbar_home"
        case .niceplay:
            return "tabbar_niceplay"
        case .message:
            return "tabbar_message"
        case .mine:
            return "tabbar_mine"
            
        }
    }
    
    var norIconName: String {
        return iconName + "_nor"
    }
    
    var selIconName: String {
        return iconName + "_sel"
    }
    
}

struct CustomTabBarView: View {
    var safeAreaEdgeInsets: EdgeInsets
    @Binding var currentTab: CustomTabBar
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(CustomTabBar.allCases, id: \.rawValue) { item in
                
                Button {
                    currentTab = item
                } label: {
                    VStack {
                        if currentTab == item {
                            AnimatedImage(name: "tabbar_animation.gif")
                                .customLoopCount(1)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 35, height: 35)
                                
                        } else {
                            Image(item.norIconName)
                        }
                        Text(item.rawValue)
                            .font(.system(size: 12, weight: .bold))
                            .foregroundColor(Color.black.opacity(currentTab == item ? 0.7 : 0.3))
                    }
                }
                .frame(maxWidth: .infinity)
                
                if item == .niceplay {
                    Button {
                        
                    } label: {
                        Image("tabbar_post_idle")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 75, height: 75)
                    }
                    .offset(y: -10)
                }
                
            }
        }
        .padding(.top, 20)
        .padding(.bottom, safeAreaEdgeInsets.bottom == 0 ? 10 : safeAreaEdgeInsets.bottom)
        .background(Color.white.clipShape(CustomTabBarBackColorClipShape()))
    }
}

struct CustomTabBarView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct CustomTabBarBackColorClipShape: Shape {
    func path(in rect: CGRect) -> Path {
        let width = rect.size.width
        let height = rect.size.height
        let midWidth = width * 0.5
        return Path { path in
            path.move(to: CGPoint(x: 0, y: 20))
            path.addLine(to: CGPoint(x: midWidth - 55, y: 20))
            path.addCurve(to: CGPoint(x: midWidth, y: 0), control1: CGPoint(x: midWidth - 35, y: 20), control2: CGPoint(x: midWidth - 25, y: 0))
            path.addCurve(to: CGPoint(x: midWidth + 55, y: 20), control1: CGPoint(x: midWidth + 25, y: 0), control2: CGPoint(x: midWidth + 35, y: 20))
            path.addLine(to: CGPoint(x: width, y: 20))
            path.addLine(to: CGPoint(x: width, y: height))
            path.addLine(to: CGPoint(x: 0, y: height))
        }
    }
}

//        .background(
//            Canvas { context, size in
//                let width = size.width
//                let height = size.height
//                let midWidth = width * 0.5
//                context.fill(
//                    Path { path in
//                        path.move(to: CGPoint(x: 0, y: 20))
//                        path.addLine(to: CGPoint(x: midWidth - 55, y: 20))
//                        path.addCurve(to: CGPoint(x: midWidth, y: 0), control1: CGPoint(x: midWidth - 35, y: 20), control2: CGPoint(x: midWidth - 25, y: 0))
//                        path.addCurve(to: CGPoint(x: midWidth + 55, y: 20), control1: CGPoint(x: midWidth + 25, y: 0), control2: CGPoint(x: midWidth + 35, y: 20))
//                        path.addLine(to: CGPoint(x: width, y: 20))
//                        path.addLine(to: CGPoint(x: width, y: height))
//                        path.addLine(to: CGPoint(x: 0, y: height))
//
//                    }, with: .color(.white)
//                )
//            }
//        )
